<template>
  <div class="detail">

    <div class="task-header">
      <div class="task-title">
        {{ task.name }}
      </div>
      <div class="task-value">
        ¥ {{ task.task_value }}
      </div>
      <div class="task-user">
        {{ task.username }} 发布
      </div>
    </div>

    <div class="task-body">
      <div class="task-item">
        <div class="item-title">
          任务单号
        </div>
        <div class="item-value">
          {{ task.task_num }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
          项目名称
        </div>
        <div class="item-value">
          {{ task.name }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
          数据类型
        </div>
        <div class="item-value">
          {{ dataTypeList[task.data_type] }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
           任务种类
        </div>
        <div class="item-value">
          {{ taskTypeList[task.type_task] }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
           发布日期
        </div>
        <div class="item-value">
          {{ task.create_time }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
           报名截止日期
        </div>
        <div class="item-value">
          {{ task.last_time }}
        </div>
      </div>

      <div class="task-item">
        <div class="item-title">
           任务描述
        </div>
        <div class="item-value">
          {{ task.describe }}
        </div>
      </div>

    </div>

    <div class="task-bottom">
      <mt-button v-show="isLogin === false" type="default" @click="loginUser">
        请登陆
      </mt-button>
      <mt-button v-show="isLogin === true && task.user === userId" type="default" @click="joinerList">
        查看报名人员
      </mt-button>
      <mt-button v-show="isLogin === true && task.user === userId && [5, 6].indexOf(task.station) !== -1" type="primary" @click="joinerDataList">
        查看数据
      </mt-button>
      <mt-button v-show="isLogin === true && task.user !== userId && Object.keys(userJoinInfo).length == 0" type="primary" @click="joinTask">
        我要报名该任务
      </mt-button>
      <mt-button v-show="isLogin === true && task.user !== userId && Object.keys(userJoinInfo).length > 0" type="primary" @click="joinTaskData">
        {{ userJoinInfoMap[userJoinInfo.station] }}
      </mt-button>
    </div>

  </div>
</template>

<script>
import axios from 'axios';
import qs from 'qs';
import { Toast } from 'mint-ui';
import storeItem from '../utils/store';

export default {
  name: 'detail',
  data() {
    return {
      taskId: 0,
      task: {},
      userJoinInfo: {},
      isLogin: false,
      userId: 0,

      dataTypeList: {
        0: '全部',
        1: '文本',
        2: '音频',
        3: '图片',
        4: '视频',
        5: '问卷',
      },
      taskTypeList: {
        0: '全部任务',
        1: '单人任务',
        2: '多人任务',
      },
      userJoinInfoMap: {
        0: '报名成功，等到分配',
        1: '正在执行,去上传数据',
        2: '已被拒绝',
        3: '数据审核',
        4: '数据需修改,去重新上传数据',
        5: '数据已反馈',
        6: '任务完成',
      },
    };
  },
  methods: {
    loadTask() {
      if (this.taskId === 0) {
        return;
      }

      axios.get('/task/task_detail', {
        params: {
          id: this.taskId,
        },
      }).then((response) => {
        if (response.status === 200) {
          if (response.data.code === 200 && response.data.status === true) {
            this.task = response.data.data;
          }
        }
      });
    },
    loadUserJoin() {
      if (this.isLogin === false) {
        return;
      }

      axios.get('/task/task_join_detail', {
        params: {
          task_id: this.taskId,
          token: storeItem.getItem('token'),
        },
      }).then((response) => {
        if (response.status === 200 && response.data.status === true) {
          this.userJoinInfo = response.data.data;
        }
      });
    },
    joinTask() {
      const userToken = storeItem.getItem('token');
      if (!userToken) {
        return;
      }

      axios.post('/task/join_task', qs.stringify({
        id: this.taskId,
        token: userToken,
      })).then((response) => {
        console.log(response);
        if (response.status === 200) {
          if (response.data.status === true && response.data.code === 200) {
            Toast({
              message: '报名成功',
              duration: 1500,
            });
            setTimeout(() => {
              this.$router.push({
                name: 'JoinTask',
              });
            }, 1500);
          } else {
            Toast({
              message: response.data.message,
              duration: 1500,
            });
          }
        }
      });
    },
    joinTaskData() {
      if ([1, 4].indexOf(this.userJoinInfo.station) === -1) {
        return;
      }
      this.$router.push({
        name: 'JoinTaskData',
        params: {
          taskId: this.taskId,
        },
      });
    },
    joinerList() {
      this.$router.push({
        name: 'JoinerList',
        params: {
          taskId: this.taskId,
        },
      });
    },
    joinerDataList() {
      this.$router.push({
        name: 'JoinerDataList',
        params: {
          taskId: this.taskId,
        },
      });
    },
    loginUser() {
      this.$router.push({
        name: 'Login',
      });
    },
  },
  mounted() {
    this.isLogin = storeItem.getItem('user_id') !== null;
    this.userId = parseInt(storeItem.getItem('user_id'), 10) || 0;

    this.taskId = this.$route.params.taskId;
    this.loadTask();
    this.loadUserJoin();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.task-header {
  text-align: left;
  margin-left: 60px;
}
.task-title {
  font-size: 18px;
  display: inline-block;
  line-height: 30px;
}

.task-value {
  display: inline-block;
  margin-left: 60px;
  font-size: 18px;
  color: #42b983;
}
.task-user {
  line-height: 30px;
}

.task-body {
  line-height: 30px;
  font-size: 16px;
  margin-top: 20px;
}
.task-item {
  background-color: #f3f3f3;
  padding: 20px;
  margin-bottom: 10px !important;
  width: 90%;
  margin: auto;
  border-radius: 4px;
}
.item-title {
  display: inline-block;
  width: 30%;
  text-align: right;
  margin-right: 20px;
}
.item-value {
  display: inline-block;
  width: 60%;
  text-align: left;
}

.task-bottom {
  margin-bottom: 20px;
}
</style>
